<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <meta name="format-detection" content="telephone=no" />
    <title>屏障思维</title>
    <script>

        ;(function(){
            //缩放比例
            var defaultW = 750 ;
            if (/Android (d+.d+)/.test(navigator.userAgent)) {
                var version = parseFloat(RegExp.$1);
                if (version > 2.3) {
                    var phoneScale = parseInt(window.screen.width) / defaultW;
                    document.write('<meta name="viewport" content="width='+defaultW+'", minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
                } else {
                    document.write('<meta name="viewport" content="width='+defaultW+'">');
                }
            } else {
                document.write('<meta name="viewport" content="width='+defaultW+', user-scalable=no">');
            }
        })();

    </script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="pack-flow">
        <p class="title-p"><span class="title-span">不安全现象的案例示意</span></p>
        <div class="flow-tree">
            <div>
                <div class="flow-tree-title">
                    <p>第二步</p>
                    <p>导致不安全现象/不良习惯的原因</p>
                </div>
                <div class="flow-tree-1">
                    <div>
                        <div class="cheek-pack"><p class="mediacy-p">A.不良习惯</p></div>
                    </div>
                    <div>
                        <div class="cheek-pack"><p class="mediacy-p">B.周围人/环境的影响</p></div>
                    </div>
                    <div>
                        <div class="cheek-pack"><p class="mediacy-p">无人干预</p></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="flow-tree-title">
                    <p>第三步</p>
                    <p>每个原因的解决方案</p>
                </div>
                <div class="flow-tree-2">
                    <div class="tree-2-1">
                        <div>
                            <div class="cheek-tree-2"><p class="mediacy-p">了解相关后果</p></div>
                        </div>
                        <div>
                            <div class="cheek-tree-2"><p class="mediacy-p text-red">转移注意力</p></div>
                        </div>
                    </div>
                    <div class="tree-2-2">
                        <div>
                            <div class="cheek-tree-2"><p class="mediacy-p text-red">主动影响他人</p></div>
                        </div>
                        <div>
                            <div class="cheek-tree-2"><p class="mediacy-p">卸载游戏软件</p></div>
                        </div>
                    </div>
                    <div class="tree-2-3">
                        <div>
                            <div class="cheek-tree-2"><p class="mediacy-p">设立惩罚计划</p></div>
                        </div>
                        <div>
                            <div class="cheek-tree-2"><p class="mediacy-p text-red">寻找监督者</p></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="flow-tree-title">
                    <p>第一步</p>
                    <p>最需要改善的不安全现象/不良习惯</p>
                </div>
                <div class="flow-tree-3">
                    <div><p class="mediacy-p">走路看手机</p></div>
                    <div><p class="mediacy-p">产生的后果</p></div>
                </div>
            </div>
        </div>
        <div class="foot-text">
            <p>第四步&nbsp;请点击选择三个解决方案内容（从方案是否相互独立、是否可实施、是否经济等方面考虑）。</p>
        </div>
        <div class="connect-line-1"></div>
        <div class="connect-line-2"></div>
        <div class="connect-line-3"></div>
    </div>
</body>
</html>